<!doctype html><!-- -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="assets/style.css">
    <link rel="stylesheet" href="assets/iconfont.css">
</head>
<body>
<div class="container">
    <main class="main">
        <div class="top"><!--顶上的蓝色部分 -->
            <div class="location">
                <i class="i material-symbols:location-on-outline"></i>  <!-- -->
                <span>云南大学呈贡校区</span>
                <i class="i material-symbols:arrow-drop-down"></i>
            </div>
            <div class="search">
                <div class="search-text">
                    <i class="i material-symbols:search"></i>
                    <span>搜索饿了么商家、商品名称</span>
                </div>
            </div>
        </div>
        <div class="food-category">
            <div class="category-item">
                <img src="assets/img/dcfl01.png"/>
                <span>美食</span>
            </div>
            <div class="category-item">
                <img src="assets/img/dcfl02.png"/>
                <span>早餐</span>
            </div>
            <div class="category-item">
                <img src="assets/img/dcfl03.png"/>
                <span>跑腿代购</span>
            </div>
            <div class="category-item">
                <img src="assets/img/dcfl04.png"/>
                <span>汉堡披萨</span>
            </div>
            <div class="category-item">
                <img src="assets/img/dcfl05.png"/>
                <span>甜品饮品</span>
            </div>
            <div class="category-item">
                <img src="assets/img/dcfl06.png"/>
                <span>速食简餐</span>
            </div>
            <div class="category-item">
                <img src="assets/img/dcfl07.png"/>
                <span>地方小吃</span>
            </div>
            <div class="category-item">
                <img src="assets/img/dcfl08.png"/>
                <span>米粉面馆</span>
            </div>
            <div class="category-item">
                <img src="assets/img/dcfl09.png"/>
                <span>包子粥铺</span>
            </div>
            <div class="category-item">
                <img src="assets/img/dcfl10.png"/>
                <span>炸鸡炸串</span>
            </div>

        </div>
    </main>
    <footer class="footer">  <!--底部固定大小部分 -->
        <div>
           <i class="i material-symbols:house-outline"></i>
           <span>首页</span>
        </div>
        <div>
            <i class="i material-symbols:location-on-outline"></i>
            <span>发现</span>
        </div>
        <div>
            <i class="i material-symbols:apk-document-outline"></i>
            <span>订单</span>
        </div>
        <div>
            <i class="i material-symbols:deployed-code-account-outline-rounded"></i>
            <span>我的</span>
        </div>
    </footer>
</div>



</body>
</html>